<template>
    <el-card shadow="always" >
      <div class="flex item-center justify-between mb-4">
        <el-button type="primary" size="small" @click="addReport">新增</el-button> 
        
        <el-tooltip
          offect="dark"
          content="刷新"
          placement="top"
        >
          <el-button text @click="frush">
            <el-icon :size="20"><Refresh /></el-icon>
          </el-button> 
        </el-tooltip>
      </div>
      <el-table :data="pageData" stripe style="width: 100%" v-loading="loading">
        <el-table-column prop="title" label="标题" width="" >
          <template #default="scope">
            <el-link type="primary" :underline="false" @click="router.push(`/notice/detail/${scope.row.id}`)">{{ scope.row.title }}</el-link>
            <!-- <el-link type="primary" :underline="false" @click="router.push(`/notice/detail?id=${scope.row.id}`)">{{ scope.row.title }}</el-link> -->
          </template>
        </el-table-column>
        <el-table-column prop="content" label="内容" width="380" >
        </el-table-column>
        <el-table-column prop="addTime" label="发布时间" width="380" />
        <el-table-column label="操作" align="center" >
          <template #default="scope">
            <el-button text type="primary" size="small"  @click="updateReport(scope.row)">修改</el-button>  
            <el-popconfirm title="确认删除？" confirm-button-text="确认" cancel-button-text="取消" @confirm="deleteReport(scope.row.id)">
              <template #reference>
                <el-button text type="primary" size="small" >删除</el-button>
              </template>
           </el-popconfirm>
          </template>
        </el-table-column>
        
      </el-table>
      <div class="flex items-center justify-center mt-5">
            <el-pagination 
            background 
            v-model:current-page="currentPage1"
            v-model:page-size="pageSize1"
            :page-sizes="[2, 3, 4, 5]"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
        </div>
  
      
  <FormDrawer :title="drawerTitle" ref="formDrawerRef" @submit="handleSubmit">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">
            <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="公告标题"></el-input>
            </el-form-item>
            <el-form-item label="内容" prop="content">
              <el-input v-model="form.content" placeholder="公告内容" type="textarea" :row="5"></el-input>
            </el-form-item>
        </el-form>
  </FormDrawer>   
</el-card>
</template>
<script setup>
import { ref,reactive,computed } from 'vue'
import FormDrawer from "@/components/FormDrawer.vue"
import { useRouter } from "vue-router"
const router = useRouter()
const tableData = ref([]) // 总条数,即所有数据
function getData(){
  tableData.value = [
    {id:1,title:"title01",content:"content01","addTime":"2024-01-03"},
    {id:2,title:"title02",content:"content02","addTime":"2024-01-03"},
    {id:3,title:"title03",content:"content03","addTime":"2024-01-03"},
    {id:4,title:"title04",content:"content04","addTime":"2024-01-03"},
    {id:5,title:"title05",content:"content05","addTime":"2024-01-03"},
    {id:6,title:"title06",content:"content01","addTime":"2024-01-03"},
    {id:7,title:"title07",content:"content02","addTime":"2024-01-03"},
    {id:8,title:"title08",content:"content03","addTime":"2024-01-03"},
    {id:9,title:"title09",content:"content04","addTime":"2024-01-03"},
    {id:10,title:"title10",content:"content05","addTime":"2024-01-03"},
    {id:11,title:"title11",content:"content01","addTime":"2024-01-03"},
    {id:12,title:"title12",content:"content02","addTime":"2024-01-03"},
    {id:13,title:"title13",content:"content03","addTime":"2024-01-03"},
    {id:14,title:"title14",content:"content04","addTime":"2024-01-03"},
    {id:15,title:"title15",content:"content05","addTime":"2024-01-03"},

  ]
  total1.value=tableData.value.length
}


/////// 前端分页 //////

const currentPage1 = ref(1) // 当前页码
const pageSize1 = ref(2)  // 选择每页几条
const total1 = ref(0)
const background = ref(false)
const disabled = ref(false)
const pageData = ref([])

// 分页逻辑
function getPageDatas() {
  pageData.value = []
  console.log(pageSize1.value)
  for (let i =  (currentPage1.value - 1) * pageSize1.value; i < tableData.value.length; i++) {
    // console.log(tableData.value[i])
    pageData.value.push(tableData.value[i])
    if (pageData.value.length === pageSize1.value) break;
  }
  console.log(pageData.value)
}


const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
  pageSize1.value = val;
  currentPage1.value = 1; // 选择每页几条时，自动打到第一页重新计算数据
  getPageDatas() 
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
  currentPage1.value = val;
  getPageDatas()
}

getData() // 加载全部数据
getPageDatas() // 根据分页逻辑，添加分页的数据，页面上正在展示的数据

const frush = ()=>{
  currentPage1.value = 1;
  getPageDatas()
}
////////////
// 删除
function deleteReport(res){
  loading.value = true
  console.log("删除公告。。。")
  console.log(res)
}




// 后端分页
const loading = ref(false)
const currentPage = ref(1)
const total = ref(5)
const limit = ref(3)
// 重置表单,深拷贝
function resetForm(row=false){
  if(formRef.value) formRef.value.clearValidate()
  // if(row){
  //   // 修改赋值
  //   for(const key in form){
  //     form[key] = row[key]
  //   }
  // }else{
  //   // 增加置为空
  //   for(const key in form){
  //     form[key] = ""
  //   }
  // }
}
// 新增
const editId = ref(0) // 区别新增与修改
const drawerTitle = computed(()=>editId.value ? "编辑" : "新增" )
const form = reactive({
    title:"",
    content:""
})
const formDrawerRef = ref(null) // 控制打开关闭
const formRef = ref(null) // 规则
const rules = {
    title:[{
        required: true,
        message: '标题不能为空',
        trigger: 'blur'
    }]
}

const addReport = ()=>{
  editId.value = 0
  resetForm()
  formDrawerRef.value.open()
  // 要么采用重新赋值为空，要么resetForm()
  form.title = ""
  form.content = ""
 
  
  
}
// 修改
const updateReport = (row) => {
  console.log("修改report...")
  console.log(row)
  editId.value = row.id
  resetForm(row)
  formDrawerRef.value.open()
  form.title = row.title
  form.content = row.content
 
  
}
const handleSubmit = ()=>{
    formRef.value.validate((valid)=>{
        if(!valid) return
        
        formDrawerRef.value.showLoading()
        // const fun = editId.value ? updateImageClass({"editId":editId.value,"form":form}) : createImageClass(form)
        // fun.then(res=>{
        //     // toast("新增成功")
        //     getData(editId.value ? currentPage.value : 1)
        //     formDrawerRef.value.close()
        // })
        .finally(()=>{
            formDrawerRef.value.hideLoading()
        })
  
    })
}
</script>